<template>
  <div class="search">
    <el-autocomplete
        v-model="hosname"
        clearable
        placeholder="请输入医院名称"
        :fetch-suggestions="getHospitalName"
        :trigger-on-focus=false
        @select="goDetail"

    />
    <el-button type="primary" size="default"
               style="height: 50px;font-size: 15px;font-weight: bold"
               :icon="Search">搜索
    </el-button>

  </div>
</template>

<script setup lang="ts">
//引入element图标
import {Search} from '@element-plus/icons-vue'
import {reqHospitalName} from "@/api/home";
import {ref,onMounted} from "vue";
import {useRouter} from "vue-router";
import type {HospitalNameResponseData} from "@/api/home/type.ts";

let router=useRouter()

// 存储输入框内容
let hosname=ref<string>('')

onMounted(()=>{
})

const getHospitalName=async (keyword:string,callback:any)=>{
  let res:HospitalNameResponseData=await reqHospitalName(keyword)
  // console.log(res.data)
  //整理获取的数据成为callback需要的固定格式
  let showData=res.data.map(item=>{
   return{
     value:item.hosname,//医院名称
     hoscoed:item.hoscode//医院编码
   }
  })
  callback(showData)

}
// 进入医院详情页
const goDetail=(item:object)=>{
  router.push({
    path:'/hospital/register',
    query:{
      hoscode:item.hoscoed
    }
  })
}
</script>

<style scoped lang="scss">
 .search{
   margin-top: 30px;
   width: 1200px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;

  // 深度选择器
  :deep(.el-input__wrapper){
    width: 600px;
    height: 50px;

  }

 }
</style>